<div class="jumbotron">
    <h5>模型驱动表单（响应式表单）</h5>
    <p>
        模板驱动表单适用于页面比较固定, 例如登录页面, 可以使用模板驱动表单.
        响应式表单适用于动态页面, 通常都是维护一个formGroup, 任何想要添加进来进行验证的组件，只要绑定一个formControl, 然后加入到formGroup里, 接下来的状态就可以通过formGroup来获取了.
    </p>
    <p>使用响应式表单，我们需要引入ReactiveFormsModule:</p>
    <pre><code highlight="import { ReactiveFormsModule } from '@angular/forms';"></code></pre>
    <p>模板驱动表单中可用的那些属性型验证器（如 required、minlength 等）对应于 Validators 类中的同名函数。</p>
    <pre><code [highlight]="topCode"></code></pre>
    <div class="alert alert-success">建议：使用 FormBuilder 来生成表单控件</div>
  </div>
  <div class="d-flex">
    <div class="col-6">
      <div class="card">
        <div class="card-header">模板驱动表单</div>
        <div class="card-body">
          <form [formGroup]="form" (ngSubmit)="submit()">
            <div class="form-group">
              <label>真实姓名</label>
              <input type="text" formControlName="user" [ngClass]="{'is-invalid': !form.get('user').valid}" class="form-control">
              <small *ngIf="formErrors.user" class="form-text text-danger">{{formErrors.user}}</small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">密码</label>
              <input type="password" formControlName="password" [ngClass]="{'is-invalid': !form.get('password').valid}" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-6">
      <pre><code [highlight]="form.value | json"></code></pre>
    </div>
  </div>  
  <hr />
  <div class="d-flex">
      <div class="col-6">
        <pre><code [highlight]="html"></code></pre>
        
      </div>
      <div class="col-6">
        <div class="code-dark">
          <pre><code [highlight]="ts"></code></pre>
        </div>
      </div>
    </div>